<script lang="ts">
  var xData = ["项目1", "项目2", "项目3", "项目4", "项目5", "项目6"];
  // 计划数据数组
  var planData = [320, 302, 301, 334, 390, 0];
  // 完成数据数组
  var completeData = [320, 132, 101, 0, 90, 0];
  var color = [
    {
      type: "linear", x: 0, x2: 1, y: 0, y2: 0,
      colorStops: [
        {offset: 0, color: "#54a2d3"},
        {offset: 0.5, color: "#54a2d3"},
        {offset: 0.5, color: "#7ed1e3"},
        {offset: 1, color: "#7ed1e3"}
      ]},
    {
      type: "linear", x: 0, x2: 1, y: 0, y2: 0,
      colorStops: [
        {offset: 0, color: "#a3a418"},
        {offset: 0.5, color: "#a3a418"},
        {offset: 0.5, color: "#cdbf38"},
        {offset: 1, color: "#cdbf38"}],
    }];
  var barWidth = 30;
  var constData = [];
  var showData = [];
  var otherData = [];
  for (var i = 0; i < planData.length; i++) {
    planData[i] = Number(planData[i]);
    completeData[i] = Number(completeData[i]);
    otherData[i] = planData[i] - completeData[i];
    if (planData[i] <= 0) {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
            color: "rgba(0,0,0,0)",
          },
        },
      });
    } else {
      if (completeData[i] == planData[i]) {
        constData.push({
          value: 1,
          itemStyle: {
            normal: {
              color: color[1],
            },
          },
        });
      } else {
        constData.push(1);
      }
      if (completeData[i] > 0) {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#e9d86c",
              borderWidth: 2,
              color: "#e9d86c",
            },
          },
        });
      } else {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#89e3ec",
              borderWidth: 2,
              color: "#89e3ec",
            },
          },
        });
      }
    }
  }
  const option = {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return params[0].axisValue + "：" +
          "<br/>计划：" + planData[params[0].dataIndex] +
          "<br/>完成：" + completeData[params[0].dataIndex];
      },
    },
    series: [
      {
        z: 1,
        name: "计划",
        type: "bar",
        barWidth: barWidth,
        stack: "总量",
        color: color[0],
        data: otherData,
      },
      {
        z: 2,
        name: "完成",
        type: "bar",
        barWidth: barWidth,
        stack: "总量",
        color: color[1],
        data: completeData,
      },
      {
        z: 3,
        name: "项目",
        type: "pictorialBar",
        data: constData,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[0],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 4,
        name: "项目",
        type: "pictorialBar",
        data: otherData,
        symbol: "diamond",
        symbolPosition: "end",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[1],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: "项目",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        tooltip: {
          show: false,
        },
      },
    ],
  };
</script>